<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<!--  设计目标是响应移动设备,移动优先的样式是核心框架的一部分 为了确保正却得渲染和触摸缩放需要在head元素中添加meta标记
width=device-width 设置了页面的宽度以跟随设备的screen-width 将因设备而异
initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别
-->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!--应用样式表-->
<!--  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 5 实例</title>
  <!--导入jQuery文件 框架依赖于jquery文件-->
  <script src="/jQuery/jquery-3.5.1.min.js"></script>
  <!--  导入bootstrap-->
<!--  <script src="/bootstrap/js/bootstrap.min.js"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<!--
Bootstrap5 是最流行的html css 和 javascript框架 用于创建响应式,移动优先的网站
Bootstrap5 是Bootstrap 是最新版本 使用了新的组件 更快的样式表 还有更快的响应能力
什么是 Bootstrap？
Bootstrap 是一个免费的前端框架，用于更快、更轻松地进行 Web 开发
Bootstrap 包括基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模态、图像轮播等
Bootstrap 提供了丰富的 JavaScript 插件
Bootstrap 可使您能够轻松地创建响应式设计

响应式网页设计
响应式网页设计旨在创建能够自动调整的网站,以便增加所有设备上的使用体验 无论是手机还是大型台式机
优点
  易于使用：任何对 HTML 和 CSS 有基本了解的人都可以马上开始使用 Bootstrap
  响应式特性：Bootstrap 的响应式 CSS 可针对手机、平板电脑和台式机进行调整
  移动优先的方法：在 Bootstrap 中，移动优先样式是其核心框架的一部分
  浏览器兼容性：Bootstrap 5 与所有现代浏览器兼容（Chrome、Firefox、Edge、Safari 和 Opera）。
从哪里获得 Bootstrap 5？
有两种方法可以在您自己的网站上使用 Bootstrap 5。

您可以：
包含来自 CDN 的 Bootstrap 5
从 getbootstrap.com 下载 Bootstrap 5

最新编译并压缩的 CSS
<link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">

最新编译的 JavaScript
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>

使用 Bootstrap 5 CDN 的优势之一：
许多用户在访问另一个站点时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 将确保一旦用户从中请求文件，它将从最接近他们的服务器提供服务，这也导致更快的加载时间。

Bootstrap 5 还需要一个包含元素来包装站点内容
有两种容器可供选择
.container 类提供了一个响应式的固定宽度容器
.container-fluid 类提供了一个全宽容器,跨越视口的整个宽度 占据整个页面

固定容器
使用 .container 类创建响应式,固定宽度的容器 注意它的宽度 max-width 会在不同屏幕尺寸上发生变化
流体容器
使用 .container-fluid 类创建全宽容器，它总是跨越整个屏幕宽度（width 总是 100%）：

容器填充
默认情况下 容器有左右填充 左右内边距 ,没有顶部或底部填充 上下内边距
pt-5 的意思是添加一个大的顶部填充

响应式容器
使用 .container-sm|md|lg|xl 类来确定容器何时应该响应。

Bootstrap 5 网格系统
Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，那么可以将这些列组合在一起，以创建更宽的列：

网格系统响应迅速，列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12（如果不需要使用所有 12 个可用列）。

网格类
Bootstrap 5 网格系统有六个类：

.col- (超小型设备 - 屏幕宽度小于 576px)
.col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
.col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)
.col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)
.col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)
提示：每个类都是按比例放大的，所以如果你想为 sm 和 md 设置相同的宽度，你只需要指定 sm。

Bootstrap 5 网格的基本结构
以下是 Bootstrap 5 网格的基本结构：

 控制列宽，以及它们在不同设备上的显示方式
 第一个例子：创建一行（<div class="row">）。然后，添加所需数量的列（带有合适的 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表数字，每行加起来应为 12
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每个 col 为 50% 宽度，而三个 cols = 每个 col 为 33.33% 宽度。四个列 = 25% 宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列获得响应性。
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

 或者让 Bootstrap 自动处理布局
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

-->
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>请调整这张响应式页面的大小查看效果</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>列 1</h3>
      <p>胜日寻芳泗水滨，无边光景一时新。</p>
      <p>等闲识得东风面，万紫千红总是春。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 2</h3>
      <p>纷纷红紫已成尘，布谷声中夏令新。</p>
      <p>夹路桑麻行不尽，始知身是太平人。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3</h3>
      <p>远上寒山石径斜，白云生处有人家。</p>
      <p>停车坐爱枫林晚，霜叶红于二月花。</p>
    </div>
  </div>
</div>
<div class="container gd-1">
  <h1>我的第一张 Bootstrap 页面(带有响应式固定宽度容器)</h1>
  <p>这部分在 .container类中.</p>
  <p>.container 类提供了响应式固定宽度的容器.</p>
</div>
<div class="container-fluid">
  <h1>我的第一张 Bootstrap 页面(带有全宽容器)</h1>
  <p>这部分在 .container-fluid 类中。</p>
  <p>.container-fluid 类提供全宽容器，跨越视口的整个宽度。</p>
</div>
<div class="container pt-5">
  <h1>我的第一张 Bootstrap 页面</h1>
</div>
<div class="container p-5 my-5 border">
  <h1>我的第一张 Bootstrap 页面</h1>
  <p>这个容器有边框和额外的内边距和外边距</p>
</div>
<div class="container p-5 my-5 bg-dark text-red">
  <h1>我的第一张 Bootstrap 页面</h1>
  <p>这个容器有深色背景色和白色文本，以及额外的内边距和外边距。</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
  <h1>我的第一张 Bootstrap 页面</h1>
  <p>这个容器有蓝色背景色和白色文本，以及额外的内边距和外边距。</p>
</div>
<div class="container pt-3">
  <h1>响应式容器</h1>
  <p>请调整浏览器窗口大小来查看效果。</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

<div class="container-fluid mt-3">
  <h1>三个等宽列</h1>
  <p>提示：请尝试在行类中添加一个 class="col" 的新 div - 将创建四个等宽的列。</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>
<h5>下例显示了如何从平板电脑开始创建四个等宽的列，然后扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列会自动堆叠在一起</h5>
<div class="row">
  <div class="col-sm-3 bg-dark">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3 bg-dark">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>
<p>下例显示了如何在平板电脑得到两个不同宽度的列并扩展到超大型桌面：4和8</p>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8 bg-dark text-white">.col-sm-8</div>
</div>
</body>
</html>
